<template>
	<view class="container">
		<view class="name">星梦云康智能台灯</view>
		<view class="info">连续按压2次开关键，直到语音提示</view>
		<view class="info">“已进入配网模式，等待配置中”</view>
		<image class="device-img" :src="$IMAGE_BASE_URL + '/static/bg_reset_device.png'" mode="heightFix" />
		<view class="btn-wrapper">
			<view class="tip" @click="changeChecked">
				<checkbox class="checkbox" :checked="checked"></checkbox>
				<text class="text">确认以上操作</text>
			</view>
			<BaseButton shape="circle" text="设备已重置" :disabled="!checked" @click="resetDevice" />
		</view>
	</view>
</template>

<script>
	import BaseButton from '@/components/base-button/index.vue';
	
	export default {
		data() {
			return {
				productName: "",
				checked: false,
			};
		},
		components: {
			BaseButton
		},
		methods: {
			changeChecked() {
				this.checked = !this.checked;
			},
			resetDevice() {
				if(!this.checked) {
					return;
				}
				uni.navigateTo({
					url:'/pages/addDevice/scanList'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #FFFFFF;

		.name {
			font-size: 60rpx;
			font-family: PingFang SC;
			color: #2b2a2e;
			text-align: center;
			padding: 95rpx 0;
		}

		.info {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #2b2a2e;
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.info:last-child {
			margin-bottom: 0;
		}

		.device-img {
			height: 500rpx;
			display: block;
			margin: 0 auto;
			margin-top: 125rpx;
		}

		.btn-wrapper {
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.tip {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10rpx auto;
				margin-bottom: 10rpx;

				.checkbox {
					transform: scale(0.7);
				}

				.text {
					font-size: 30rpx;
					font-family: PingFang SC;
					color: #2b2a2e;
				}
			}
		}
	}
</style>
